import React from 'react'
import {
  Button,
  Checkbox,
  Form,
  Input,
  Space,
  Card,
  Table,
  Tag,
  Tooltip,
} from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

// ColumnsType<DataType> 告诉ts传入到表格中的每一条数据是DataType的类型
const columns: ColumnsType<DataType> = [
  {
    title: '序号', // 决定了这一列标题的名称
    // 如果不写render的情况下,dataIndex决定了这一列要渲染的是数据中的哪个属性的值
    // 如果写了render,则dataIndex,不能决定这一列渲染什么.决定的是render函数的返回值
    // 如果不写dataIndex,则render的第一个形参,就是dataSource中的数据对象, 如果写了dataIndex,则render中的第一个形参就是dataIndex的值所对应的dataSource中的值
    // dataIndex: 'name',
    // key: 'name',
    render: (text, record, index) => {
      // text受dataIndex影响, record永远是dataSource中的数据对象, index永远是下标
      // console.log(text, record, index)
      return index + 1
    },

    width: 80, // 控制这一列的宽度
    align: 'center', // 内容水平居中
  },
  {
    title: '医院名称',
    // dataIndex: 'age',
  },
  {
    title: '医院编码',
  },
  {
    title: 'api基础路径',
  },
  {
    title: '签名',
  },
  {
    title: '联系人名称',
  },
  {
    title: '联系人手机号',
  },
  {
    title: '操作',

    render: (_, record) => (
      <Space size="middle">
        <Tooltip title="编辑医院">
          <Button icon={<EditOutlined />} type="primary"></Button>
        </Tooltip>
        <Tooltip title={'删除医院'}>
          <Button icon={<DeleteOutlined />} type="primary" danger></Button>
        </Tooltip>
      </Space>
    ),

    fixed: 'right', //当前列在右侧滚动
    width: 120,
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

export default function HospitalSet() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <Card>
      <Form
        //  表单中的所有表单元素在一行显示,如果放不下会自动换行
        layout="inline"
        // name="basic"  // 表单的名称
        // antd中内置了栅格系统,一行分成24份
        // labelCol表示表单元素前面的描述文本在一行中的位置 span:2表示占2份
        // labelCol={{ span: 2 }}
        // wrapperCol表示表单元素在一行中的位置 span:16表示占16份
        // wrapperCol={{ span: 16 }}
        // 控制表单在的表单元素的初始值
        // initialValues={{ remember: false }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        // autoComplete="off"
      >
        <Form.Item
          // label就是对应的表单元素的描述文本
          // label="xxx"
          // 当前表单元素的name
          name="hosname"
          // 当前表单元素的校验规则
          // required: true 表示当前表单元素必填 message是校验不通过的时候的提示文本
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          {/* 文本框 */}
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
          // label="Password"
          name="hoscode"
          // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* 密码框 */}
          {/* <Input.Password /> */}
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* <Form.Item
          name="remember"
          // 声明当前表单元素控制值的属性是什么
          valuePropName="checked"
          // offset: 8 表示当前表单元素偏移8份
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item>
          {/* Space会给包裹的组件,添加间距 */}
          <Space>
            {/* 在一个表单中,如果Button上有htmlType="submit",则当前按钮就是当前表单的提交按钮 */}
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button type="default">清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <Space style={{ marginTop: 20, marginBottom: 20 }}>
        <Button type="primary">添加</Button>
        <Button type="primary" danger>
          批量删除
        </Button>
      </Space>
      {/* 
      
      columns属性决定了表格中有多少列,每一列的标题是什么,以及这一列要渲染什么数据 

      dataSource 决定了表格中要渲染什么数据
      
      scroll 给表格添加滚动条 x表示水平方向,后面的值表示滚动区域

      bordered 给表格添加边框
      */}
      <Table
        columns={columns}
        dataSource={data}
        scroll={{ x: 1500 }}
        bordered
      />
    </Card>
  )
}
